<template>
  <div class="search">
    <div>
      <el-button type="primary" @click="add">新增</el-button>
      <el-button type="primary" @click="change">修改</el-button>
      <el-button type="primary" @click="del">删除</el-button>
    </div>
    <div class="table">
      <el-table
        ref="multipleTable"
        :data="tableData"
        tooltip-effect="dark"
        style="width: 100%"
        @select="handleSelectionChange"
        :header-cell-style="{ background: '#ECF1FE' }"
        :border="true"
        ><template>
          <el-table-column type="selection" width="55"></el-table-column>
          <el-table-column prop="date" label="算法时间" width="120">
          </el-table-column>
          <el-table-column prop="name" label="算法名称" width="120">
          </el-table-column>
          <el-table-column
            prop="address"
            label="算法描述"
            show-overflow-tooltip
          >
          </el-table-column>
        </template>
      </el-table>
    </div>
    <div class="block">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage4"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="100"
        layout="total, sizes, prev, pager, next, jumper"
        :total="tableData.length"
      >
      </el-pagination>
    </div>
    <div class="change">
      <el-dialog title="算法修改" :visible.sync="dialogFormVisible">
        <div class="dialog">
          <span>算法时间</span>
          <el-input
            v-model="nowChangeTable.date"
            placeholder="请输入内容"
          ></el-input>
        </div>
        <div class="dialog dialogTop">
          <span>算法名称</span>
          <el-input
            v-model="nowChangeTable.name"
            placeholder="请输入内容"
          ></el-input>
        </div>
        <div class="dialog dialogTop">
          <span>算法描述</span>
          <el-input
            v-model="nowChangeTable.address"
            placeholder="请输入内容"
          ></el-input>
        </div>
        <div class="dialogFooter">
          <el-button type="primary" @click="changeVal">确定</el-button>
          <el-button type="primary" @click="dialogFormVisible = false"
            >取消</el-button
          >
        </div>
      </el-dialog>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      currentPage4: 4,
      tableData: [
        {
          date: "2016-05-03",
          name: "王小虎1",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-02",
          name: "王小虎2",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-04",
          name: "王小虎3",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-01",
          name: "王小虎4",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-08",
          name: "王小虎5",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-06",
          name: "王小虎6",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-07",
          name: "王小虎7",
          address: "上海市普陀区金沙江路 1518 弄",
        },
      ],
      tableData2: [
        {
          date: "2016-05-03",
          name: "王小虎1",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-02",
          name: "王小虎2",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-04",
          name: "王小虎3",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-01",
          name: "王小虎4",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-08",
          name: "王小虎5",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-06",
          name: "王小虎6",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-07",
          name: "王小虎7",
          address: "上海市普陀区金沙江路 1518 弄",
        },
      ],
      multipleSelection: [],
      inputSearch: "2016-05-03",
      dialogFormVisible: false,
      nowChangeTable: {},
      ind: "",
    };
  },
  mounted() {
    this.$root.$on("inputSearch", (val) => {
      console.log(val);
      if (val) {
        this.tableData = this.tableData;
        var s = this.tableData.filter((value) => {
          return value.name.indexOf(val) != -1;
        });
        console.log(s);
        this.tableData = s;
      } else {
        this.tableData = this.tableData2;
      }
    });
  },
  methods: {
    toggleSelection(rows) {
      if (rows) {
        rows.forEach((row) => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    handleSelectionChange(val, row) {
      console.log(val);
      this.tableData.forEach((val, index) => {
        if (val.name == row.name) {
          this.ind=index
        }
      });
      this.multipleSelection = val;
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    },
    //新增
    add() {},
    //修改
    change() {
      this.nowChangeTable = JSON.parse(
        JSON.stringify(this.multipleSelection[0])
      );
      this.dialogFormVisible = true;
    },
    //删除
    del() {
      this.tableData.forEach((val, index) => {
        this.multipleSelection.forEach((val2) => {
          if (val.name == val2.name) {
            this.tableData[index] = {};
          }
        });
      });

      this.tableData = this.tableData.filter((val) => {
        return val.name;
      });
    },
    //修改确定
    changeVal() {
      this.$set(this.tableData,this.ind,this.nowChangeTable)
      this.dialogFormVisible = false;
    },
  },
};
</script>
<style lang="scss" scoped>
.marginLeft {
  margin-left: 1%;
}
.dialog {
  display: flex;
  white-space: nowrap;
  align-items: center;
  justify-content: center;
  span {
    font-size: 1.2em;
  }
  .el-input {
    width: 70%;
    margin-left: 3%;
  }
}
.dialogTop {
  margin-top: 2%;
}
.dialogFooter {
  display: flex;
  justify-content: center;
  margin-top: 4%;
}
</style>